<template>
	<el-main>
		<el-alert title="二次封装el-dialog,加入加载中/最大化." type="success" style="margin: 0 0 20px 0"></el-alert>
		<el-card shadow="never" header="内置">
			<el-button type="primary" @click="open1">默认</el-button>
			<el-button type="primary" @click="open2">加载</el-button>
			<el-button type="primary" @click="open3">禁止拖拽最大化和关闭</el-button>
		</el-card>
		<el-card shadow="never" header="异步" style="margin-top: 15px">
			<el-button type="primary" @click="asyn1">异步加载1</el-button>
			<el-button type="primary" @click="asyn2">异步加载2</el-button>
			<el-alert
				title="适用于页面有很多弹窗操作,利用异步组件按需加载,加快首屏的加载速度和打包体积"
				style="margin-top: 20px"
			></el-alert>
		</el-card>
	</el-main>

	<sc-dialog v-model="dialog1" draggable title="提示">
		内容
		<template #footer>
			<el-button @click="dialog1 = false">取 消</el-button>
			<el-button type="primary" @click="dialog1 = false">确 定</el-button>
		</template>
	</sc-dialog>

	<sc-dialog v-model="dialog2" draggable title="模拟加载" :width="400" :loading="dialog2Loading">
		<el-empty description="NO Data" :image-size="80"></el-empty>
		<template #footer>
			<el-button @click="dialog2 = false">取 消</el-button>
			<el-button type="primary" :loading="dialog2Loading" @click="dialog2 = false">确 定</el-button>
		</template>
	</sc-dialog>

	<sc-dialog v-model="dialog3" title="禁用拖拽" :show-fullscreen="false" :show-close="false">
		内容
		<template #footer>
			<el-button @click="dialog3 = false">取 消</el-button>
			<el-button type="primary" @click="dialog3 = false">确 定</el-button>
		</template>
	</sc-dialog>

	<Dialog1 v-if="asynDialog1" draggable @closed="asynDialog1 = false"></Dialog1>
	<Dialog2 v-if="asynDialog2" draggable @closed="asynDialog2 = false"></Dialog2>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { defineAsyncComponent } from 'vue'

const Dialog1 = defineAsyncComponent(() => import('./dialog1.vue'))
const Dialog2 = defineAsyncComponent(() => import('./dialog2.vue'))

const dialog1 = ref(false)
const dialog2 = ref(false)
const dialog3 = ref(false)
const dialog2Loading = ref(false)
const asynDialog1 = ref(false)
const asynDialog2 = ref(false)

const open1 = () => {
	dialog1.value = true
}

const open2 = () => {
	dialog2.value = true
	dialog2Loading.value = true
	setTimeout(() => {
		dialog2Loading.value = false
	}, 1000)
}

const open3 = () => {
	dialog3.value = true
}

const asyn1 = () => {
	asynDialog1.value = true
}

const asyn2 = () => {
	asynDialog2.value = true
}

onMounted(() => {
	console.log('组件挂载完成')
})
</script>
